<template>
	<view>
	 <!--  导航 -->
	 <uni-nav-bar :border ="false" :fixed ="true" :statusBar = "true" @click-right ="openAddup" >
		 <view class="flex align-center justify-center font-weight-bold w-100" >
			 <!-- <view class="font-lg text-main mx-1" >关注</view> -->
			 <view class="font-md text-light-muted mx-1" @click="changeTab(index)" v-for="(item,index) in tabBars" 
			   :key = "index"  :class="tabIndex ===index ? 'font-lg text-main':'font-md text-light-muted'">
				 {{item.name}}
				 </view>
		 </view>
		 <text  slot="right" class="iconfont  icon-fabu-"  ></text>
	 </uni-nav-bar>
	 
	 <swiper :current="tabIndex" :duration="150" :style="'height:'+ scrollH+'px;'" @change="onChangeTab">
	 	<swiper-item :key="index" >
	 		<scroll-view scroll-y="true" :style="'height:'+ scrollH+'px;'" >
				<block v-for="(item , index ) in list " :key = "index">
	              <common-list :item = "item" :index = "index" @doSupport = "doSupport" ></common-list>	
				  <divider></divider>
	 			</block>		 
	 		</scroll-view>				
	 	</swiper-item>
		 <!-- 话题 -->
		<swiper-item>
			<scroll-view scroll-y="true" :style="'height:'+ scrollH+'px;'" >
			      <!-- 热门分类 -->
				<hot-cate :hotcate ="hotcate" ></hot-cate> 			  
					  <!-- 搜索框 -->
				<view class="p-2" >
					<view class="bg-light rounded flex align-center justify-center py-2 text-secondary " >
						<text class="iconfont icon-search mr-2" ></text>搜索话题
					</view>
				</view>
					  <!-- 轮播图 -->
					<!--  为什么外层不加view 组件尽量不要嵌套太深 -->
					<swiper class="px-2 pb-2" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item>
					          <image src="/static/demo/banner3.jpg" style="height: 300rpx;" class="w-100 rounded"></image>
						</swiper-item>					
					</swiper>
				<divider></divider>
				
				<!-- 最近更新 -->
				<view class="p-2 font-md " >最近更新</view>				
				<!-- 话题列表组件 -->
				<block v-for="(item,index) in topiclist " :key = "index">
					<top-list :item="item" :index="index" ></top-list>
				</block>
				
			</scroll-view>	
			
		</swiper-item>
		
	 </swiper>
	 
	 
	</view>
</template>

<script>
	const demo =[{
				userpic:'/static/default.jpg',
		    	 username:'昵称',
						  usertime:'2019-10-20 下午04:30',
						  isFollow:false,
						  txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
						  txt_pic:'/static/demo/datapic/11.jpg',
						  support:{
							  type:"support",
							  support_count:1,
							  unsupport_count:2
						  },
						  comment_count:2,
						  share_num:3
							    	
						},{
							userpic:'/static/default.jpg',
							username:'昵称',
							usertime:'2019-10-20 下午04:30',
							isFollow:false,
							txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
							txt_pic:'/static/demo/datapic/11.jpg',
							support:{
														  type:"support",
														  support_count:1,
														  unsupport_count:2
							},
							comment_count:2,
							share_num:3
						},{
							userpic:'/static/default.jpg',
							username:'昵称',
							usertime:'2019-10-20 下午04:30',
							isFollow:false,
							txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
							txt_pic:'/static/demo/datapic/11.jpg',
							support:{
														  type:"support",
														  support_count:1,
														  unsupport_count:2
							},
							comment_count:2,
							share_num:3
						},{
							userpic:'/static/default.jpg',
							username:'昵称',
							usertime:'2019-10-20 下午04:30',
							isFollow:false,
							txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
							txt_pic:'/static/demo/datapic/11.jpg',
							support:{
									  type:"support",
									  support_count:1,
									  unsupport_count:2
							},
							comment_count:2,
							share_num:3
						}]
	import uniNavBar from '@/components/uni_ui/uni-nav-bar/uni-nav-bar.vue'
	import commonList from '@/components/common/common_list.vue'
	import hotCate from '@/components/topic/hot-cate.vue'
	import topList from '@/components/topic/top-list.vue'
	export default {
		components:{
			uniNavBar,
			commonList,
			hotCate,
			topList
		},
		data() {
			return {
				scrollH:500,
				tabIndex:0,
				tabBars:[{
					name:"关注"},
					{
					name:"话题"	
					}
					
				],
				/* 关注更表 */
				list:[],
				hotcate:[{
					name:"关注",				
				},{
					name:"推荐"
				},{
					name:"体育"
				},{
					name:"热点"
				},{
					name:"财经"
				},{
					name:"娱乐"
				}],
				
				topiclist:[{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				}]
			}
		},
		onLoad() {
		  let res = uni.getSystemInfo({
		  	success:res=>{
				//px
			 //this.scrollH =	res.windowHeight - uni.upx2px(100)
			this.scrollH =   res.windowHeight - res.statusBarHeight - 44;
			}
		  })
		  //加载测试数据
		  this.list = demo
		  //根据选项生成列表
		  this.getData()
		},
		methods: {
			//打开发布页
			openAddup(){
				uni.navigateTo({
					url: '../upload/upload',					
				});
			},
		/* 	切换选项卡 */
		   changeTab(index){
			   this.tabIndex = index
		   }
		},
		
		//监听滑动
		onChangeTab(e){
			this.tabIndex = e.detail.current
		},
		
		//顶踩操作
		doSupport(type){
			/* 通知父组件 */
			console.log(type)
		}
		
	}
</script>

<style>

</style>
